<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./CSS/test.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
</head>
<body>
    <div class="wrapper">
        <!-- 表示这个元素同时属于 form-wrapper 和 sign-in 这两个类。 -->
        <div class="form-wrapper sign-in">
            <form action="#" method="post">
                <h2>登 录</h2>
                <div class="input-group">
                    <!-- <input type="text" placeholder="用户名" id="username"> -->
                    <!-- required：这个属性是一个布尔属性，表示该输入框是必填项 -->
                     <input type="text" required>
                     <label for="">用户名</label>
                </div>
                <div class="input-group">
                     <input type="password" required>
                     <label for="">密码</label>
                </div>
                <div class="remember">
                    <label for=""><input type="checkbox">记住密码</label>
                </div>
                <button type="submit">登 录</button>
                <div class="signUp-link">
                    <p>还没有账号？<a href="#" class="signUpBtn-link">注册</a></p>
                </div>
                <div class="social-platform">
                    <p>社交账号登录</p>
                    <div class="social-icons">
                        <!-- 引入了font-awesome，所以这里的i表示图标 -->
                        <a href="#"><i class="fa-brands fa-qq"></i></a>
                        <a href="#"><i class="fa-brands fa-weixin"></i></i></a>
                        <a href="#"><i class="fa-brands fa-tiktok"></i></a>
                    </div>
                </div>
            </form>
        </div>
        <div class="form-wrapper sign-up">
            <form action="#" method="post">
                <h2>注 册</h2>
                <div class="input-group">
                    <!-- <input type="text" placeholder="用户名" id="username"> -->
                    <!-- required：这个属性是一个布尔属性，表示该输入框是必填项 -->
                     <input type="text" required>
                     <label for="">用户名</label>
                </div>
                <div class="input-group">
                     <input type="password" required>
                     <label for="">密码</label>
                </div>
                <div class="input-group">
                    <input type="email" required>
                    <label for="">邮箱</label>
                </div>
                <div class="remember">
                    <label for=""><input type="checkbox">我同意协议</label>
                </div>
                <button type="submit">注 册</button>
                <div class="signUp-link">
                    <p>已经有账号了<a href="#" class="signInBtn-link">登录</a></p>
                </div>    
            </form>
        </div>
    </div>
    <script>
        const signUpBtnLink = document.querySelector(".signUpBtn-link");
const signInBtnLink = document.querySelector(".signInBtn-link");
const wrapper = document.querySelector(".wrapper");
signUpBtnLink.addEventListener("click", () => {
  wrapper.classList.toggle("active");
});
signInBtnLink.addEventListener("click", () => {
    wrapper.classList.toggle("active");
  });
    </script>
</body>
</html>



<%--
  Created by IntelliJ IDEA.
  User: liuqing
  Date: 2024/10/29
  Time: 22:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>小说系统登录</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-3.7.1.min.js"></script>
    <style>
        .wrapper .form-wrapper.sign-in {
            transform: scale(1) translate(0, 0); /* 登录表单默认可见 */
            opacity: 1;
        }
    </style>
</head>
<%--如果user不为空，设置好账号和密码--%>
<body>
<div class="wrapper">
    <!-- 表示这个元素同时属于 form-wrapper 和 sign-in 这两个类。 -->
    <div class="form-wrapper sign-in">
        <form action="UserLoginServlet" method="post">
            <h2>登 录</h2>
            <div class="input-group">
                <!-- <input type="text" placeholder="用户名" id="username"> -->
                <!-- required：这个属性是一个布尔属性，表示该输入框是必填项 -->
                <input type="text" id="username" name="username" required>
                <label for="username">用户名</label>
            </div>
            <div class="input-group">
                <input type="password" id="password" name="password" required>
                <label for="password">密码</label>
            </div>
            <div class="remember">
<%--                <input type="hidden" name="rem" id="rem" value="no">--%>
                <label for="rem"><input type="checkbox" id="rem" name="rem">记住密码</label>
            </div>
            <button type="submit" id="loginButton" onclick="saveCredentials()">登 录</button>
            <div class="signUp-link">
                <p>还没有账号？<a href="register.jsp" class="signUpBtn-link">注册</a>
                    <a href="forgotPassword.jsp" class="forgotPasswordBtn-link">忘记密码</a></p>
            </div>
            <div class="social-platform">
                <p>社交账号登录</p>
                <div class="social-icons">
                    <!-- 引入了font-awesome，所以这里的i表示图标 -->
                    <a href="https://im.qq.com"><i class="fa-brands fa-qq"></i></a>
                    <a href="https://weixin.com"><i class="fa-brands fa-weixin"></i></a>
                    <a href="https://www.douyin.com"><i class="fa-brands fa-tiktok"></i></a>
                </div>
            </div>
        </form>
    </div>
</div>

<script>
    // 设置 cookie
    function setCookie(name, value, days) {
        var expires = "";
        if (days) {
            var date = new Date();
            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
            expires = "; expires=" + date.toUTCString();
        }
        document.cookie = name + "=" + encodeURIComponent(value) + expires + "; path=/";
    }

    // 获取 cookie
    function getCookie(key) {
        var cookieValue = null;
        var cookies = document.cookie;
        var cookieArr = cookies.split(';');
        for (var i = 0; i < cookieArr.length; i++) {
            var cookie = cookieArr[i].trim();
            var keyArray = cookie.split('=');
            if (keyArray[0] === key) {
                cookieValue = decodeURIComponent(keyArray[1]);
                break;
            }
        }
        return cookieValue;
    }

    // 在页面加载时加载凭据
    window.onload = function() {
        var username = getCookie("username");
        var password = getCookie("password");
        var remember = getCookie("remember") === "true";

        // 如果存在，填充到表单中
        if (username) {
            document.getElementById("username").value = username;
        }
        if (password) {
            document.getElementById("password").value = password;
        }
        if (remember !== null) {
            document.getElementById("rem").checked = remember;
        }
    };

    // 保存用户名、密码和记住密码的选择
    function saveCredentials() {
        var username = document.getElementById("username").value;
        var password = document.getElementById("password").value;
        var remember = document.getElementById("rem").checked;

        // 只有当勾选“记住密码”时才保存用户名和密码
        if (remember) {
            setCookie("username", username, 7);
            setCookie("password", password, 7);
            setCookie("remember", "true", 7);
        } else {
            // 如果未勾选，删除 cookie
            setCookie("username", "", -1); // 删除用户名 cookie
            setCookie("password", "", -1); // 删除密码 cookie
            setCookie("remember", "false", -1); // 删除记住密码 cookie
        }
    }
</script>
<%
    String msg =(String) request.getAttribute("msg");
    if (msg!=null){
        request.removeAttribute("msg"); // 从请求属性中移除消息
%>
<script type="text/javascript">
    window.onload = function() {
        alert("<%=msg%>");
    };
</script>
<%
    }
%>
</body>
</html>
